<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>

<body>
<div class="form-content container">
    <h3 class="form-header h3" style="margin-bottom: 2px;">包裹购物车</h3>
    <table id="bootstrap-table"  class="table table-bordered table-striped" ></table>


            <h4 class="form-header h4">添加包裹信息</h4>
            <form id="addform">
                <table class="" width="100%" cellspacing="1" cellpadding="5" border="0" style="margin-top: 5px;" >
                    <thead>
                    <tr style=" height:38px;">
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">快递公司</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">快递单号</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">物品名称</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">物品数量</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">申报价值</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">备注</td>
                        <td style="background:#f8f8f8;text-align:center; border: 1px solid #d9d9d9 ">操作</td>
                    </tr>
                    </thead>

                    <tbody id="aptd">
                    <tr style="height:38px;">
                        <td style="border:1px solid #d9d9d9; text-align:center;">
                            <select style="height: 29px;" name="expressCompanyId" th:with="type=${@expressC.listExpressCompanys()}">
                                <option th:each="ec : ${type}" th:text="${ec.expressCompanyName}" th:value="${ec.expressCompanyId}"></option>
                            </select>
                        </td>
                        <td style="border:1px solid #d9d9d9;text-align:center;">
                            <input name="expressNo" type="text" value="" class="expressNo">
                        </td>
                        <td style="border:1px solid #d9d9d9; text-align:center;">
                            <input name="goodsName" type="text" value="" class="goodsName">
                        </td>
                        <td style="border:1px solid #d9d9d9;text-align:center;">
                            <input name="qty" type="text" value="" class="qty">
                        </td>
                        <td style="border:1px solid #d9d9d9;text-align:center;">
                            <input name="declaredValue" type="text" value="" class="declaredValue">
                        </td>
                        <td style="border:1px solid #d9d9d9;text-align:center;">
                            <input name="remark" type="text" value="">
                        </td>
                        <td style="border:1px solid #d9d9d9;text-align:center;">
                            <button type="button" class="btn btn-danger btn-xs" onclick="deletePackage(this)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
            <div style="width: 100%; text-align: center; margin: 15px;">
              <button type="button" class="btn btn-info" onclick="addPackage()">添加包裹</button>
              <button type="button" class="btn btn-info" onclick="addForm()">加入订单</button>
            </div>
            <h4 class="form-header h4">收货人地址</h4>

            <table class="table table-bordered">
                <tbody>
                    <form id="contact">
                        <tr>
                            <td align="right" class="col-sm-2">收件人：</td>
                            <td><input type="text" id = "consignee" name="consignee" th:value="${contact!=null?contact.consignee:''}" >
                                <a href="javascript:void(0);" onclick="selectContact();">
                                    <font color="blue" style="color:#00ae2d;font-size:14px;">【选择地址】</font>
                                </a>
                                <a href="javascript:void(0);" onclick="addContact();">
                                    <font color="red" style="color:#00ae2d; font-size:14px;">【添加地址】</font>
                                </a>
                            </td>
                        </tr>

                        <tr>
                            <td align="right" class="col-sm-2">联系电话人：</td>
                            <td><input type="text" id="tel" name="tel" th:value="${contact!=null?contact.tel:''}"></td>
                        </tr>

                        <tr>
                            <td align="right" class="col-sm-2">邮编Postcode：</td>
                            <td><input type="text" id="postCode" name="postCode" th:value="${contact!=null?contact.postCode:''}"></td>
                        </tr>

                        <tr>
                            <td align="right" class="col-sm-2">收货地址：</td>
                            <td><textarea id="address" name="address" th:text="${contact!=null?contact.address:''}" cols="20" rows="5" style="height: 100px;width: 600px"></textarea></td>
                        </tr>

                        <tr>
                            <td align="right" class="col-sm-2">收货地区：</td>
                            <td><select name="countryId" id="countryId" th:field="*{contact.countryId}" th:with="type=${@dict.getType('transaction_country')}">
                                    <option value="0">请选择地区</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </td>
                        </tr>
                    <!--</form>-->
                    <!--<form>-->
                        <tr>
                            <td align="right" class="col-sm-2">货物类型：</td>
                            <td><input type="radio" name="goodType" value="0" checked="true">普货
                                <input type="radio" name="goodType" value="1">敏感(<span style=" color:Red;">温馨提示当敏感走成普货 会被海关进行罚款或者充公，建议询问清楚卖家</span>)</td>
                        </tr>

                        <tr>
                            <td align="right" class="col-sm-2">运输类型：</td>
                            <td><select name="tranType" id="sss">
                                <option value="-1">请选择渠道</option>
                                <option value="0">海运</option>
                                <option value="1">空运</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td align="right">打包方式:</td>
                            <td >
                                <select name="packageType" id="packageType">
                                    <option value="0">蛇皮袋打包-比较接近预测重量,易变形</option>
                                    <option value="1">纸箱打包-产生物料重量,比较结实</option>
                                </select>
                            </td>
                        </tr>

                            <tr>
                                <td align="right" class="col-sm-2">备注：</td>
                                <td><textarea name="remark"  cols="40" rows="5"></textarea></td>
                            </tr>
                        </form>
                    </tbody>
                </table>
       
    </div>
</body>

<div th:include="include :: footer"></div>

<script th:inline="javascript">
    var prefix = ctx + "transaction/order";

    $(function() {
//        var panehHidden = false;
//        if ($(this).width() < 769) {
//            panehHidden = true;
//        }
//        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        queryPackageList();
    });
    function queryPackageList() {
        var options = {
            url: prefix + "/listOrderItemTmp",
            createUrl: prefix + "/addOrderItemTmp",
            updateUrl: prefix + "/editOrderItemTmp/{id}",
            removeUrl: prefix + "/removeOrderItemTmp",
            importTemplateUrl: prefix + "/importTemplate",
            uniqueId: "orderItemId",
            sortOrder: "desc",
            modalName: "包裹",
            showRefresh: false,
            showToggle: false,
            showExport: false,
            showSearch: false,
            showColumns: false,
            pagination: false,
            columns: [{
                checkbox: true,
                title: '全选'
                },
                {
                title: '编号',
                formatter: function (value, row, index) {
                    return index + 1;
                    },
                field: 'orderItemId'
                },
                {
                title: '类型',
                formatter: function (value, row, index) {
                    var html = [];
                    html.push('<p class="text-success"><d>代运</d></p>');
                    return html.join('');
                    }
                },
                {
                field: 'expressCompanyName',
                title: '快递公司'
                },
                {
                field: 'expressNo',
                title: '快递单号'

                },
                {
                field: 'goodsName',
                title: '物品名称'
                },
                {
                field: 'qty',
                title: '物品数量'
                },
                {
                field: 'declaredValue',
                title: '申报价值'
                },
                {
                field: 'remark',
                title: '备注'
                },

                {
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.editTab(\'' + row.orderItemId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                    actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.orderItemId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                    return actions.join('');
                    }
            }]
        };
        $.table.init(options);
    }
</script>
<script>
    var packageHtml;
    $(function(){
        init();
    });

    function init(){
        packageHtml = $("#aptd").html();
    }

    function addPackage(){
        $("#aptd").append(packageHtml);
    }

    function cheform() {
        var msg = "";

        $(".expressNo").each(function () {
            if ($(this).val() == "") {
                msg += "快递单号不能为空！\n";
            }
        });
        $(".goodsName").each(function () {
            if ($(this).val() == "") {
                msg += "物品名称不能为空！\n";
            }
        });
        var reg = /^[1-9][0-9]*$/;

        $(".qty").each(function () {
            if ($(this).val() == "") {
                msg += "物品数量不能为空！\n";
            } else if (reg.test($(this).val()) == false) {
                msg += '输入的商品数量不正确!\n';
            }
        });
        var regp = /^([0]|[1-9][0-9]*)$|^([0]|[1-9][0-9]*)(.[0-9]{1,2})?$/;

        $(".declaredValue").each(function () {
            if ($(this).val() == "") {
                msg += "物品价钱不能为空！\n";
            } else if (regp.test($(this).val()) == false) {
                msg += '输入的商品价格不正确!\n';
            }
        });
        if (msg.length > 0) {
            $.modal.alertError(msg);
            return false;
        }
        else {
            return true;
        }
    }
    function addForm() {

        if (!cheform()) {
            return;
        }
        var data_arr = $('#addform').serializeArray();
        var json = "";

        $.each(data_arr, function (i, field) {
            if (field.name == "expressCompanyId") {
                json += "{\"" + field.name + "\":\"" + field.value + "\",";
            } else if (field.name == "remark") {
                json += "\"" + field.name + "\":\"" + field.value + "\"},";
            }else {
                json += "\"" + field.name + "\":\"" + field.value + "\",";

        }
        });
        json = json.substring(0,json.length-1);
        json = "[" + json + "]";
        console.log(json);

        var config = {
            url: prefix + '/addOrderItemTmp',
            type: 'post',
            dataType: 'json',
            data: json,
            contentType: 'application/json',
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.operate.ajaxSuccess(result);
                $("#aptd").html(packageHtml);
            }
        };
        $.ajax(config)

    }

    function deletePackage(e){
        var childrenSize = $("#aptd").children().size();
        if(childrenSize>1)
            $(e).parent().parent().remove();
        else
            $.modal.alertError("最后一个，不允许删除..");
    }
    
    function addContact() {
        if(vaildContact()){
        var json = JSON.stringify($('#contact').serializeJSON());
            var config = {
                url:  ctx + "transaction/contact/add",
                type: 'post',
                dataType: 'json',
                data: json,
                contentType: 'application/json',
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function(result) {
                    $.operate.ajaxSuccess(result);
                }
            };
            $.ajax(config)
        }
    }

    function selectContact(){
        var options  = {
            url : ctx+"transaction/contact/list",
            title : '选择地址',
            width : '1000',
            callBack : function (index, layero) {
                var body = layer.getChildFrame('body', index);
                var contactId = body.find("input[name='contactId']:checked").val();
                selectAndRefreshContact(contactId,index);
            }
        };
        $.modal.openOptions(options);
    }

    function selectAndRefreshContact(contactId,index){
        var config ={
            url:  ctx + "transaction/contact/list/"+contactId+"",
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            }, success: function(result) {
                refreshContact(result);
                $.modal.closeLoading();
                layer.close(index);
            }
        }
        $.ajax(config);
    }

    function refreshContact(result) {
        $('#consignee').val(result.consignee);
        $('#tel').val(result.tel);
        $('#postCode').val(result.postCode);
        $('#address').val(result.address);
        $('#countryId').val(result.countryId);
    }

    function vaildContact() {
        var msg = "";
        if($("#consignee").val()==""){
            msg +='请输入收件人!\n';
        }
        if($("#tel").val()==""){
            msg +='请输入电话号码!\n';
        }
        if($("#postCode").val()==""){
            msg +='请输入postCode!\n';
        }
        if($("#address").val()==""){
            msg +='请输入地址!\n';
        }
        if($("#countryId").val()==0){
            msg +='请选择收货地区!\n';
        }
        if (msg.length > 0) {
            $.modal.alertError(msg);
            return false;
        }
        else {
            return true;
        }
    }
</script>

</html>
